<template>
	<view class="search-wrap">
		<view class="search">
			<view class="search-input">
				<image 
					class="search-icon" 
					src="@/static/images/icon_search.png">
				</image>
				<input 
					class="search-control" 
					type="text" 
					:value="keyword" 
					placeholder="搜索" 
					confirm-type="search" 
					@confirm="search" />
			</view>
			<view class="search-btn" @tap="cancel">
				<text class="search-btn-label">取消</text>
			</view>
			<view class="search-menu" v-show="poiList.length > 0 && isOpenMenu">
				<view class="search-group">
					<view class="search-item" v-for="(po, index) in poiList" :key="index">
						<view class="search-item-btn" @tap="selectPos(po)">{{po.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {wgs84togcj02} from '@/util/util.js';
		
	export default {
		props: {
			position: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				keyword: '',
				map: {},
				isOpenMenu: false,
				poiList: []
			}
		},
		methods: {
			cancel() {
				this.isOpenMenu = false;
				this.keyword = '';
			},
			selectPos(po) {
				this.keyword = po.name;
				this.isOpenMenu = false;
				
				this.$emit('sendPos', {point: po.point, address: po.address})
			},
			onPoiSearchComplete(state, result) {
				this.poiList = result.poiList.slice(0);
			},
			poiSearchNearBy() {
				let searchObj = new plus.maps.Search();
				searchObj.onPoiSearchComplete = this.onPoiSearchComplete.bind(this);
				let  pt = new plus.maps.Point(this.longitude, this.latitude); 
				
				searchObj.poiSearchNearBy(this.keyword, pt, 1000);
			},
			search(e) {
				this.keyword = e.detail.value;
				this.poiList = [];
				this.isOpenMenu = true;
				
				this.poiSearchNearBy();
			},
			setVal(val){
				let cood = wgs84togcj02(val.longitude, val.latitude);
				
				this.latitude = cood[1];
				this.longitude = cood[0];
			},
			init() {}
		},
		watch: {
			position: {
				handler(val){
					this.setVal(val);
				},
				deep: true
			}
		},
		onLoad() {},
		onReady() {}
	}
</script>

<style lang="scss">
	.search-wrap{
		padding: 12rpx 30rpx;
		position: absolute;
		right: 0rpx;
		left: 0rpx;
		z-index: 2;
		background-color: #ffffff;
		.search{
			position: relative;
			top: 0rpx;
			left: 0rpx;
			.search-input{
				margin-right: 84rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				.search-icon{
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					top: 16rpx;
					left: 16rpx;
				}
				.search-control{
					height: 60rpx;
					padding: 14rpx 14rpx 14rpx 60rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					border: 1rpx solid #d6d6d6;
					border-radius: 14rpx;
					box-sizing: border-box;
				}
			}
			
			.search-btn{
				padding: 12rpx 10rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				font-size: 30rpx;
				line-height: 36rpx;
				color: #5c5c5c;
				.search-btn-label{
					font-size: 30rpx;
					line-height: 36rpx;
					color: #5c5c5c;
				}
			}
			
			.search-menu{
				position: absolute;
				top: 60rpx;
				left: 0rpx;
				right: 0rpx;
				padding: 10rpx 0rpx;
				background-color: #fff;
				.search-group{
					.search-item{
						padding: 5rpx 20rpx;
						.search-item-btn{
							font-size: 24rpx;
							line-height: 30rpx;
							color: #5c5c5c;
						}
					}
				}
			}
			
			
		}
	}
</style>
